<template>
    <view class="layout" v-if="isShow">
        <view class="goBack" v-on:click="goBack" v-bind:style="{top:(getStatusBarHeight()-2)+'px'}">
            <uni-icons type="back" color="#fff" size="20"></uni-icons>
        </view>
        <score-view :score="score" v-on:tap="addScoreClick"></score-view>
        <view class="content">
            <view class="title">
                <view class="bg">
                    <image src="../../static/bg_title.png" mode="aspectFill"></image>
                    <image class="wallet" src="../../static/ic_wallet.png" v-if="false" mode="aspectFill"></image>
                </view>
                <view class="info" v-bind:style="{top:20+'px'}">
                    <view class="title1">
                        {{title}}
                    </view>
                    <view class="title2">
                        {{itemNums}}次机会最高中奖金币数100万
                    </view>
                    <view class="title3">
                        {{itemDetail.subtitle}}
                    </view>
                </view>
            </view>
            <view class="usernums" v-bind:style="{ height : numHeight + 'rpx'}">
                <view class="items">
                    <view class="item" v-for="(item, index) in userNums" v-bind:style="{ border: item.isWin && isShowWinNums? '2px solid red' : 'none' }">
                        <view class="winnum">
                            {{item.num}}
                        </view>
                        <view class="money">
                            ${{item.money}}
                        </view>
                    </view>
                </view>
                <canvas v-if="!isShowWin" class="canvas2" id="canvas2" disable-scroll="true" canvas-id="canvas2" v-on:touchstart="touchstart2" v-on:touchmove="touchmove2" v-on:touchend="touchend2"></canvas>
            </view>
        </view>
        <view class="menuBar" v-if="!isGaming">
            <view class="group" v-bind:style="{opacity:menuState?1:0,transform:menuState?'scaleX(1)':'scaleX(0)'}">
                <view class="item" hover-class="hoverItem" v-on:click="autoPlayClick">
                    <uni-icons type="checkbox" size="26"></uni-icons>
                    <view class="text">自动刮奖</view>
                </view>
                <view class="item" hover-class="hoverItem" v-on:click="autoPlayClickTen">
                    <uni-icons type="loop" size="26"></uni-icons>
                    <view class="text">连刮10张</view>
                </view>
                <view class="item" hover-class="hoverItem" v-on:click="refreshBtnSubmit">
                    <uni-icons type="upload" size="26"></uni-icons>
                    <view class="text">再来一张</view>
                </view>
                <view class="item" hover-class="hoverItem" v-on:click="soundBtnClick">
                    <uni-icons v-if="isOpenSound" type="mic" size="26"></uni-icons>
                    <uni-icons v-if="!isOpenSound" type="micoff" size="26"></uni-icons>
                    <view class="text">音效</view>
                </view>
            </view>
            <view class="close" v-on:click="closeMenu">
                <uni-icons type="closeempty" size="20" color="#fff" v-if="menuState"></uni-icons>
                <uni-icons type="list" size="20" color="#fff" v-else></uni-icons>
            </view>
        </view>
		
		<uni-popup ref="resultPopup" v-bind:is-mask-click="false" mask-background-color="rgba(0,0,0,0.8)">
		    <view class="resultPopup">
		        <view class="bg win" v-if="winMoney!== 0">
		            <view class="text">{{'恭喜您中得'+winMoney+'积分奖励'}}</view>
		        </view>
		        <view class="bg loser" v-else>
		            <view class="text">{{'机会只留给有准备的人，\n再试一次吧！'}}</view>
		        </view>
		        <!-- <view class="doubelBtn" v-on:click="doubelBtnSubmit" v-if="winMoney!== 0 && winMoney <= 10000 &&!isDouble">
		            <button type="primary">奖励翻倍</button>
		        </view> -->
		        <view class="submitBtn" v-on:click="onSubmit" v-if="winMoney!== 0 && winMoney <= 10000 &&!isDouble">
		            <button type="primary">再来一次</button>
		        </view>
		        <view class="submitBtnLose" v-on:click="onSubmit" v-if="winMoney == 0">
		            <button type="primary">再来一次</button>
		        </view>
		        <view class="close" v-on:click="closeResult">
		            <uni-icons type="close" color="#eee" size="40"></uni-icons>
		        </view>
		    </view>
		</uni-popup>
    </view>
   
</template>

<script>
    import Vue from 'vue';
    import {
        getStatusBarHeight,
        getNavBarHeight,
        rpxToPx,
        pxToRpx
    } from "@/utils/system.js";
    import {
        getTotalUserScore,
        getUserScoreFromCloud,
        saveUserTotalScoreToCloud,
        getUserScore,
        addUserScore,
        saveUserAddScoreToLocal,
        SignInGetScore,
        SignInGetScoreLocal
    } from '../../store/scoreManager.js';
    import {
        onLoad,
        onShow,
        onReady,
        onBackPress
    } from "@dcloudio/uni-app";
    import {
        onShareAppMessage,
        onShareTimeline
    } from "@dcloudio/uni-app";
    import {
        getOffMony,
        getOnMony,
        padZero,
        getPinyinWithNum,
        getRandomNum
    } from '../../utils/random.js';
    import {
        getTodayDateString,
        getTodayMonthString
    } from '../../utils/common.js';

    export default {
        data() {
            return {
                title: '',
                titleHeight: 0,
                numHeight: 0,
                isShowWin: false,
                content: "刮开覆盖膜，如果出现数字\"7\"则获得该数字下的所示积分，如果出现数字\"77\"则获得该数字下的所示积分的两倍，如果出现数字\"777\"则获得该数字下的所示积分的三倍。",
                tips: ' 设置奖项：￥10,000,000、￥5,000,000、￥2,000,000、￥1,000,000、￥500,000、￥100,000、￥50,000、￥10,000、￥1,000、￥500、￥200、￥100',
                openNums: [],
                userNums: [],
                viewWidth: 0,
                viewHeight: 0,
                score: 0,
                ctx: null,
                usertype: 0,
                viewWidth2: 0,
                viewHeight2: 0,
                ctx2: null,
                points: [],
                points2: [],
                winPoints: 0,
                userPoints: 0,
                itemtype: 0,
                resultPopup: null,
                winMoney: 0,
                itemNums: 0,
                instance: null,
                cost: -50,
                isShow: false,
                itemWidth: 55,
                startX: 0,
                startY: 0,
                isShowRefresh: false,
                innerAudioContext: uni.createInnerAudioContext(),
                isShowWinNums: false,
                menuState: true,
                isOpenSound: true,
                isGameFinish: false,
                isGaming: false,
                totalWinMoneys: 0,
                totalGameTimes: 0,
                isNoMonyes: false,
                timer: null,
                isMenuToolEnable: true,
                adType: 0,
                isGameReady: false
            };
        },
        mounted() {
            this.innerAudioContext.autoplay = false;
            this.innerAudioContext.src = "/static/audio/gua.m4a";
            this.onShow();
            // 原onShow中的逻辑移到这里调用，或者根据实际情况拆分到合适的生命周期钩子中
        },
        methods: {
            closeMenu() {
                this.menuState =!this.menuState;
            },
            autoPlayClick() {
                this.adType = 3;
                if (this.isMenuToolEnable == false) {
                    if (this.videoAd) {
                        this.videoAd.show().catch(() => {
                            // 失败重试逻辑
                            this.videoAd.load().then(() => this.videoAd.show()).catch(err => {
                                console.error('激励视频 广告显示失败', err);
                                uni.showToast({
                                    title: '广告拉取失败，请检查网络状况后重试',
                                    icon: "none",
                                    duration: 1500
                                });
                            });
                        });
                    }
                } else {
                    if (this.timer) {
                        clearInterval(this.timer);
                    }
                    if (this.isGameFinish) {
                        if (this.isGameReady == false) {
                            this.refreshBtnSubmit();
                            setTimeout(() => {
                                this.singleAutoPlay();
                            }, 600);
                        } else {
                            this.singleAutoPlay();
                        }
                    } else {
                        this.singleAutoPlay();
                    }
                }
            },
            singleAutoPlay() {
                this.isGaming = true;
                let startX = 0;
                let startY = 0;
                this.timer = setInterval(() => {
                    this.ctx2.clearRect(startX, startY, 150, 150);
                    this.ctx2.draw(true);
                    startX = startX + 50;
                    if (startX >= pxToRpx(uni.getWindowInfo().screenWidth - 200)) {
                        startY += 120;
                        startX = 0;
                    }
                    if (pxToRpx(startY) >= this.numHeight) {
                        clearInterval(this.timer);
                        this.autoCheckShowAnwser();
                        startX = 0;
                        startY = 0;
                        this.isGaming = false;
                    }
                }, 50);
            },
            singleAutoPlayNotCheck() {
                let startX = 0;
                let startY = 0;
                this.timer = setInterval(() => {
                    this.isShowWinNums = true;
                    this.ctx2.clearRect(startX, startY, 150, 150);
                    this.ctx2.draw(true);
                    startX = startX + 50;
                    if (startX >= pxToRpx(uni.getWindowInfo().screenWidth - 200)) {
                        startY += 120;
                        startX = 0;
                    }
                    if (pxToRpx(startY) >= this.numHeight) {
                        clearInterval(this.timer);
                        this.isGameReady = false;
                        this.isGameFinish = true;
                        this.totalWinMoneys += this.winMoney;
                        this.winMoney = 0;
                        this.isShowWinNums = true;
                        startX = 0;
                        startY = 0;
                        this.tenTimesAutoPlayGame();
                    }
                }, 50);
            },
            autoPlayClickTen() {
                this.adType = 3;
                if (this.isMenuToolEnable == false) {
                    if (this.videoAd) {
                        this.videoAd.show().catch(() => {
                            // 失败重试逻辑
                            this.videoAd.load().then(() => this.videoAd.show()).catch(err => {
                                console.error('激励视频 广告显示失败', err);
                                uni.showToast({
                                    title: '广告拉取失败，请检查网络状况后重试',
                                    icon: "none",
                                    duration: 1500
                                });
                            });
                        });
                    }
                } else {
                    this.isGaming = true;
                    this.totalWinMoneys = 0;
                    this.totalGameTimes = 0;
                    if (this.timer) {
                        clearInterval(this.timer);
                    }
                    this.tenTimesAutoPlayGame();
                }
            },
            tenTimesAutoPlayGame() {
                if (this.totalGameTimes!= 10) {
                    this.totalGameTimes += 1;
                    if (this.isGameFinish) {
                        this.refreshBtnSubmit();
                        if (this.isNoMonyes == false) {
                            setTimeout(() => {
                                this.singleAutoPlayNotCheck();
                            }, 600);
                        } else {
                            this.totalGameTimes = 10;
                            this.isGaming = false;
                            this.winMoney = this.totalWinMonyes;
                            this.autoCheckShowAnwser();
                        }
                    } else {
                        this.singleAutoPlayNotCheck();
                    }
                } else {
                    this.winMoney = this.totalWinMoneys;
                    this.autoCheckShowAnwser();
                    this.isGaming = false;
                }
            },
            soundBtnClick() {
                this.isOpenSound =!this.isOpenSound;
                uni.setStorageSync("isOpenSound", this.isOpenSound);
            },
            autoCheckShowAnwser() {
                if (this.isOpenSound === true) {
                    if (this.winMoney!= 0) {
                        const innerAudioContext = uni.createInnerAudioContext();
                        innerAudioContext.autoplay = false;
                        innerAudioContext.src = "/static/audio/huanhu.mp3";
                        innerAudioContext.play();
                    } else {
                        const innerAudioContext = uni.createInnerAudioContext();
                        innerAudioContext.autoplay = false;
                        innerAudioContext.src = "/static/audio/kexi.mp3";
                        innerAudioContext.play();
                    }
                }
                this.isGameReady = false;
                this.isShowWin = true;
                this.isShowWinNums = true;
                this.isGameFinish = true;
                setTimeout(() => {
                    this.resultPopup.open();
                    this.score = this.addUserScore(this.winMoney, this.itemtype);
                }, 1000);
            },
            goBack() {
                if (this.timer) {
                    clearInterval(this.timer);
                }
                uni.navigateBack({
                    success: () => {},
                    fail: () => {
                        uni.reLaunch({
                            url: '/pages/index/shouye'
                        });
                    }
                });
            },
            onBackPress(options) {
                if (options.from === 'backbutton') {
                    return true;
                }
                return false;
            },
            onLoad(e) {
                this.isNewUser = e.isNewUser;
                this.itemDetail = JSON.parse(e.itemDetail);
                this.title = this.itemDetail.name;
                if (!this.itemDetail.title ||!this.itemDetail.cost) {
                    uni.reLaunch({
                        url: '/pages/detail/detail0' + '?title=平安喜乐'
                    });
                    return;
                }
                this.isShow = true;
                this.titleHeight = getStatusBarHeight() + 10;
                this.numHeight = pxToRpx(uni.getWindowInfo().screenHeight - getNavBarHeight()) - (350 + 20);
                this.itemNums = Math.floor(this.numHeight / 120.0) * 5;
                setTimeout(() => {
                    this.creatNums();
                }, 1000);
                if (wx.createRewardedVideoAd) {
                    this.videoAd = wx.createRewardedVideoAd({
                        adUnitId: 'adunit-68d6f70cfd097fdb'
                    });
                    this.videoAd.onLoad(() => {});
                    this.videoAd.onError((err) => {
                        console.error('激励视频光告加载失败', err);
                    });
                    this.videoAd.onClose((res) => {
                        if (res && res.isEnded) {
                            if (this.adType == 1) {
                                this.score = saveUserAddScoreToLocal(1000, 1);
                            } else if (this.adType == 2) {
                                this.score = saveUserAddScoreToLocal(this.winMoney, 99);
                                this.isDouble = true;  }
                        } else {
                            if (this.adType == 1) {
                                uni.showToast({
                                    title: '未获得奖励，每次完成广告观看可获得1000金币奖励',
                                    icon: "none",
                                    duration: 2000
                                });
                            } else if (this.adType == 2) {
                                uni.showToast({
                                    title: '未获得奖励，观看完成可获得当前得奖的双倍奖励！',
                                    icon: "none",
                                    duration: 2000
                                });
                            } else if (this.adType == 3) {
                                uni.showToast({
                                    title: '未获得奖励，仅观看一次广告，全天可用！',
                                    icon: "none",
                                    duration: 2000
                                });
                            } else {
                                uni.showToast({
                                    title: '中途退出，未获得奖励！',
                                    icon: "none",
                                    duration: 2000
                                });
                            }
                        }
                    });
                }
            },
            doubelBtnSubmit() {
                this.adType = 2;
                if (this.videoAd) {
                    this.videoAd.show().catch(() => {
                        // 失败重试
                        this.videoAd.load().then(() => this.videoAd.show()).catch(err => {
                            console.error('激励视频 广告显示失败', err);
                            uni.showToast({
                                title: '广告拉取失败，请检查网络状况后重试',
                                icon: "none",
                                duration: 1500
                            });
                        });
                    });
                }
                if (wx.createInterstitialAd) {
                    this.interstitialAd = wx.createInterstitialAd({
                        adUnitId: 'adunit-1722f7e6276cc54a'
                    });
                    this.interstitialAd.onLoad(() => {});
                    this.interstitialAd.onError((err) => {
                        console.error('插屏广告加载失败', err);
                    });
                    this.interstitialAd.onClose(() => {});
                }
            },
            loadHomeAd() {
                if (!this.itemDetail.isShowAds) {
                    return;
                }
                const key = "detail-AD" + this.itemDetail.type;
                const count = uni.getStorageSync(key);
                const day = getTodayDateString();
                if (count) {
                    const c = count.split("--");
                    if (c[0] == day) {
                        if (Number(c[1]) < this.itemDetail.adTimes) {
                            this.loadAD();
                            uni.setStorageSync(key, day + "--" + (Number(c[1]) + 1));
                        }
                    } else {
                        this.loadAD();
                        uni.setStorageSync(key, day + "--" + 1);
                    }
                } else {
                    this.loadAD();
                    uni.setStorageSync(key, day + "--" + 1);
                }
            },
            loadAD() {
                console.error('加载插屏广告');
                if (this.interstitialAd) {
                    this.interstitialAd.show().catch((err) => {
                        console.error('插屏广告显示失败', err);
                    });
                }
            },
            addScoreClick() {
                this.userInfo.score = SignInGetScoreLocal();
                return;
                this.adType = 1;
                if (this.videoAd) {
                    this.videoAd.show().catch(() => {
                        // 失败重试
                        this.videoAd.load().then(() => this.videoAd.show()).catch(err => {
                            console.error('激励视频 广告显示失败', err);
                            uni.showToast({
                                title: '广告拉取失败，请检查网络状况后重试',
                                icon: "none",
                                duration: 1500
                            });
                        });
                    });
                }
            },
            drawInit2() {
                const that = this;
                this.getViewHW2().then(() => {
                    that.ctx2 = uni.createCanvasContext('canvas2', that.instance);
                    that.ctx2.clearRect(0, 0, that.viewWidth2, that.viewHeight2);
                    that.ctx2.setFillStyle('#bbb');
                    that.ctx2.fillRect(0, 0, that.viewWidth2, that.viewHeight2);
                    let x = 0;
                    let y = 0;
                    for (var i = 0; i < that.viewHeight2 / that.itemWidth + 1; i++) {
                        y = i * (that.itemWidth + 15);
                        for (var j = 0; j < that.viewWidth2 / that.itemWidth + 1; j++) {
                            x = j * (that.itemWidth + 15);
                            that.ctx2.drawImage('../../static/ic_wallet.png', x, y, that.itemWidth, that.itemWidth);
                        }
                    }
                    that.ctx2.draw();
                });
            },
            getViewHW2() {
                return new Promise((resolve, reject) => {
                    uni.createSelectorQuery().in(this.instance).select(".usernums").boundingClientRect((data) => {
                        this.viewWidth2 = data.width;
                        this.viewHeight2 = data.height;
                        resolve();
                    }).exec(() => {});
                });
            },
            closeResult() {
                this.resultPopup.close();
            },
            refreshBtnSubmit() {
                if (this.isGameReady == false) {
                    return this.onSubmit();
                }
                return true;
            },
            onSubmit() {
                this.isDouble = false;
                if (this.score >= 50) {
                    this.isGameReady = true;
                    this.score = this.addUserScore(this.cost);
                    this.resultPopup.close();
                    this.winMoney = 0;
                    this.isNoMonyes = false;
                    this.isShowWinNums = false;
                    this.isShowWin = false;
                    this.isDouble = false;
                    this.ctx = null;
                    this.points = [];
                    this.ctx2 = null;
                    this.points2 = [];
                    this.winPoints = 0;
                    this.userPoints = 0;
                    setTimeout(() => {
                        if (this.score >= 0) {
                            this.creatNums();
                            this.drawInit2();
                        }
                    }, 500);
                    return false;
                } else {
                    this.isGameReady = false;
                    this.isNoMonyes = true;
                    this.resultPopup.close();
                    uni.showToast({
                        title: '您的金币不够了，点击上方金币"+"按钮增加1000金币。',
                        icon: "none",
                        duration: 2000
                    });
                    return true;
                }
            },
            creatNums() {
                let open = this.itemDetail.winNumObjs;
                let user = [];
                let isDoble = getRandomNum(this.itemDetail.doubleRate) > 1000;
                let isContainWin = true;
                while (user.length!= this.itemNums) {
                    const num = getRandomNum(this.itemDetail.numRate);
                    const winNum = open.find(item => item.winNum === num);
                    if (winNum) {
                        if (isContainWin) {
                            user.push(num);
                            isContainWin = false;
                        } else if (isDoble) {
                            user.push(num);
                            isDoble = false;
                        }
                    } else {
                        user.push(num);
                    }
                }
                if (this.isNewUser == true && isContainWin == true) {
                    user[getRandomNum(20)] = open[0].winNum;
                    console.log("新用户");
                }
                this.userNums = [];
                for (let num in user) {
                    let money = "";
                    let isWin = false;
                    let url = "";
                    const winNum = open.find(item => item.winNum === user[num]);
                    if (winNum) {
                        if (winNum.multiple > 2) {
                            money = getOnMony(this.itemDetail.winRate, this.itemDetail.winsMultipleMoney);
                            this.winMoney += money * winNum.multiple;
                        } else {
                            money = getOnMony(this.itemDetail.winRate, this.itemDetail.winsMoney);
                            this.winMoney += money * winNum.multiple;
                        }
                        url = winNum.winText;
                        isWin = true;
                    } else {
                        money = getOffMony(this.itemDetail.winsMoney);
                        const index = user[num] % this.itemDetail.normalNums.length;
                        url = this.itemDetail.normalNums[index];
                    }
                    this.userNums.push({
                        num: url,
                        money,
                        isWin
                    });
                }
            },
            touchstart2(e) {
                this.startX = e.changedTouches[0].x;
                this.startY = e.changedTouches[0].y;
            },
            touchmove2(e) {
                let moveX = e.changedTouches[0].x;
                let moveY = e.changedTouches[0].y;
                this.userPoints += 1;
                let currentStartX = e.changedTouches[0].x;
                let currentStartY = e.changedTouches[0].y;
                this.ctx2.clearRect(this.startX, this.startY, 100, 100);
                this.ctx2.draw(true);
                this.startX = e.changedTouches[0].x;
                this.startY = e.changedTouches[0].y;
            },
            touchend2(e) {
                this.chechShowAnwser();
            },
            chechShowAnwser() {
                if (this.userPoints >= 200) {
                    this.isShowWin = true;
                    this.isShowWinNums = true;
                    if (this.isOpenSound === true) {
                        setTimeout(() => {
                            if (this.winMoney!= 0) {
                                const innerAudioContext = uni.createInnerAudioContext();
                                innerAudioContext.autoplay = false;
                                innerAudioContext.src = "/static/audio/huanhu.mp3";
                                innerAudioContext.play();
                            } else {
                                const innerAudioContext = uni.createInnerAudioContext();
                                innerAudioContext.autoplay = false;
                                innerAudioContext.src = "/static/audio/kexi.mp3";
                                innerAudioContext.play();
                            }
                        }, 500);
                    }
                    this.isGameReady = false;
                    this.isGameFinish = true;
                    this.isShowWin = true;
                    this.isShowWinNums = true;
                    setTimeout(() => {
                        this.resultPopup.open();
                        this.score = this.addUserScore(this.winMoney, this.itemtype);
                    }, 1000);
                } else {
                    this.isShowWin = false;
                    this.isShowWinNums = false;
                }
            }
        }
    };
</script>

// <!-- // scss 语言类型  scoped css样式的类名仅限当前页面 不污染其它页面 -->
<style lang="scss">
	.layout {
		width: 100%;
		height: 100vh;
		background-color: #008B8B;
		position: relative;

		.goBack {
			position: fixed;
			margin-left: 10rpx;
			width: 38px;
			height: 38px;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			backdrop-filter: blur(10rpx);
			border: 1rpx solid rgba(255, 255, 255, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1000;
		}

		.content {
			// width: 100%;
			height: calc(100vh - 80rpx);
			background-color: #de3018;
			margin-top: 0rpx;
			border: 20rpx solid #008B8B;
			box-sizing: content-box;
			border-radius: 20px;
			overflow: hidden;
			position: relative;
			display: flex;
			align-items: center;
			flex-direction: column;

			.title {
				position: relative;
				width: 100%;

				.bg {
					position: absolute;
					top: 0rpx;
					left: 0rpx;
					width: 100%;
					height: 350rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					position: absolute;
					top: 0rpx;
					left: 0rpx;
					width: 100%;
					height: 350rpx;
					display: flex;
					align-items: center;
					flex-direction: column;

					.title1 {
						width: 100%;
						font-size: 110rpx;
						font-weight: bold;
						text-align: center;
						color: #008B8B;
						// color: white;
					}

					.title2 {
						width: 80%;
						font-size: 18px;
						text-align: center;
						color: #de3018;
						background-color: #ffe21d;
						padding: 0 20rpx;
					}

					.title3 {
						width: 100%;
						margin-top: 20rpx;
						font-size: 14px;
						text-align: center;
						color: #ffe21d;
						padding: 0 20rpx;
					}
				}
			}

			.usernums {
				margin-top: 380rpx;
				position: relative;
				width: 95%;
				background-color: #d8d7d7;
				border: 10rpx solid #008B8B;

				.items {
					width: 100%;
					display: grid;
					grid-template-columns: repeat(5, 1fr);
					row-gap: 10rpx;
					column-gap: 20rpx;
					padding: 5rpx;

					.item {
						width: 110rpx;
						height: 110rpx;
						// background-color: #d1d0d0;
						border-radius: 50%;

						.winnum {
							margin-top: 10rpx;
							font-size: 50rpx;
							text-align: center;
							color: #333;
							font-weight: bold;
						}

						.znum {
							font-size: 16rpx;
							text-align: center;
							color: black;
							margin-top: -5rpx;
						}

						.money {
							font-size: 20rpx;
							text-align: center;
							color: black;
							font-weight: bold;
							margin-top: 0rpx;
						}
					}
				}

				.canvas2 {
					z-index: 1;
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}

			}
		}
		
		.menuBar {
			z-index: 100;
			position: fixed;
			bottom: 20px;
			right: 50%;
			transform: translateX(50%);
			display: flex;
			align-items: center;
			flex-direction: row;
			.group {
				display: grid;
				grid: auto-flow / 1fr 1fr 1fr 1fr;
				gap: 30rpx;
				transition: 0.3s;
				transform-origin: right center;

				.item {
					background: #ffe21d;
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					border: 2px solid #de3018;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.6);
					.text {
						margin-top: -5rpx;
						font-size: 23rpx;
						transform: scale(0.85);
					}
				}

				.hoverItem {
					transform: scale(0.95);
				}
			}

			.close {
				width: 70rpx;
				height: 70rpx;
				background: rgba(0, 0, 0, 0.9);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 0rpx;
				line-height: 1em;
				margin-left: 20px;
			}
		}

	}

	.resultPopup {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 150rpx;

		.bg {
			background: no-repeat center;
			background-size: cover;
			position: relative;
		}

		.win {
			width: 735rpx;
			height: 986rpx;
			background-image: url('https://mp-02da6b36-ab1b-494d-b346-d6763fb77772.cdn.bspapp.com/resource/image/bg_win_2.png');
			background-size: 500rpx 655rpx;

			.text {
				line-height: 120rpx;
				text-align: center;
				position: absolute;
				width: 100%;
				top: 605rpx;
				left: 0;
				color: #fff;
				font-size: 40rpx;
				font-weight: bolder;
			}
		}

		.loser {
			width: 735rpx;
			height: 986rpx;
			background-image: url('https://mp-02da6b36-ab1b-494d-b346-d6763fb77772.cdn.bspapp.com/resource/image/bg_lose_2.png');
			background-size: 500rpx 605rpx;

			.text {
				line-height: 80rpx;
				text-align: center;
				position: absolute;
				padding: 0 160rpx;
				width: 100%;
				top: 545rpx;
				left: 0;
				color: #fff;
				font-size: 40rpx;
				font-weight: bolder;
			}
		}

		.submitBtn {
			width: 30%;
			margin-top: 40rpx;
			border-radius: 10rpx;

			button {
				background: transparent;
				font-size: 25rpx;
			}
		}

		.submitBtnLose {
			width: 60%;
			margin-top: -160rpx;

			button {
				background: #ee4626;
			}
		}

		.doubelBtn {
			width: 60%;
			margin-top: -160rpx;

			button {
				background: #F5D54D;
				color: #F5514d;
			}
		}

		.close {
			position: absolute;
			margin-left: 10rpx;
			width: 38px;
			height: 38px;
			// background: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			backdrop-filter: blur(10rpx);
			// border: 1rpx solid rgba(255, 255, 255, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 1000;
			right: 100rpx;
			top: 200rpx;
		}
	}

	.footer {
		position: fixed;
		width: 80rpx;
		height: 80rpx;
		bottom: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}
</style>